import React from 'react'
import Items from './Items'
import { Input, message, Form } from 'antd';
import { relative } from 'upath';
const FormItem = Form.Item


const SensitiveWords = ({
  dataSource,
  handleAddSensitiveWord,
  updateSensitiveWord,
  deleteSensitiveWord,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  }
}) => {

  const handleOnPressEnter = (e) => {
    const fields = getFieldsValue()
    console.log(fields)
    if (!fields.word) {
      message.error("亲，输入之后再回车~")
      return
    }
    handleAddSensitiveWord({
      word: fields.word
    }).then(() => {
      fields.word = ''
      setFieldsValue(fields)
    })
  }

  return (
    <div>
      {dataSource.map(item => <Items key={item.id} {...item} updateItems={updateSensitiveWord} deleteItem={deleteSensitiveWord} />)}
      <FormItem style={{ position: "relative", top: -8, display: "inline-block" }}>
        {getFieldDecorator('word')(
          <Input placeholder="回车提交" onPressEnter={handleOnPressEnter} size="small" style={{ width: 80 }} />
        )}
      </FormItem>
    </div>
  )

}


export default Form.create()(SensitiveWords)
